<template>
  <div>
    <svg class="rtext" version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 1788 826.6" style="enable-background:new 0 0 1788 826.6;" xml:space="preserve">
      <text transform="matrix(0.896 0.3116 -1.000000e-02 0.9999 745.5906 179.7286)" class="st0 st1 st2">关系</text>
      <text transform="matrix(0.9201 0.32 -1.000000e-02 0.9999 777.5222 190.8334)" class="st0 st1 st2">型</text>
      <text transform="matrix(0.8299 0.317 -2.998000e-02 0.9996 1084.7581 295.9555)" class="st0 st1 st3">文档型</text>
      <text transform="matrix(0.9001 0.3107 -2.000000e-02 0.9998 1281.2162 365.3823)" class="st0 st1 st4">融合型</text>
      <text transform="matrix(0.924 0.308 -1.000000e-02 0.9999 1470.5668 432.1821)" class="st0 st1 st2">缓存</text>
      <text transform="matrix(0.9 0.3 -1.000000e-02 0.9999 1503.4963 443.1588)" class="st0 st1 st2">型</text>
      <g>
	      <path class="st5" d="M1017.8,479.4l130.4,45.8v36.4l-130.4-45.8L1017.8,479.4z"/>
        <path class="st6" d="M1144.5,523.7l3.7,1.6v36.4l-4.5-1.4"/>
        <path class="st6" d="M1022.2,481l-4.5-1.6v36.4l3.7,1.6"/>
        <router-link to="/detail/nav7" class="is-link">
        <text transform="matrix(0.8216 0.296 -1.778000e-02 0.9998 1028.5895 508.0073)" class="st0 st7 st3">TeleDB for DDS</text>
        </router-link>
      </g>
      <g>
	      <path class="st5" d="M529.1,298.4L678.9,353v36.4l-149.8-54.7L529.1,298.4z"/>
        <path class="st6" d="M675.2,351.5l3.7,1.6v36.4l-4.5-1.4"/>
        <path class="st6" d="M533.5,299.9l-4.5-1.6v36.4l3.7,1.6"/>
        <router-link to="/detail/nav1" class="is-link">
        <text transform="matrix(0.9076 0.3269 -1.778000e-02 0.9998 537.8712 326.9175)" class="st0 st7 st3">分布式拓展 DRDS</text>
        </router-link>
      </g>
      <g>
      	<path class="st5" d="M695.7,358.7l266.6,100.1v36.4L695.7,395.1L695.7,358.7z"/>
        <path class="st6" d="M958.6,457.2l3.7,1.6v36.4l-4.5-1.4"/>
        <path class="st6" d="M700.1,360.2l-4.5-1.6v36.4l3.7,1.6"/>
        <router-link to="/detail/nav1" class="is-link">
        <text transform="matrix(0.9408 0.3389 -1.778000e-02 0.9998 710.8292 389.4265)" class="st0 st8 st9">TeleDB for </text>
        <text transform="matrix(0.8148 0.2935 -1.778000e-02 0.9998 795.6206 419.972)" class="st0 st7 st3">MySQL / </text>
        <text transform="matrix(0.9408 0.3389 -1.778000e-02 0.9998 862.3271 444.0025)" class="st0 st8 st9">openGauss</text>
        </router-link>
      </g>
      <g>
	      <path class="st5" d="M1179.3,536.7l142.5,51.8v36.4l-142.5-51.8L1179.3,536.7z"/>
        <path class="st6" d="M1318.1,586.9l3.7,1.6v36.4l-4.5-1.4"/>
        <path class="st6" d="M1183.8,538.2l-4.5-1.6v36.4l3.7,1.6"/>
        <router-link to="/detail/nav5" class="is-link">
        <text transform="matrix(0.8867 0.3194 -1.778000e-02 0.9998 1185.8762 564.1044)" class="st0 st7 st3">TeleDB for HTAP</text>
        </router-link>
      </g>
      <g>
	      <path class="st5" d="M1349,600.4l151.3,55.4v36.4L1349,636.8L1349,600.4z"/>
        <path class="st6" d="M1496.6,654.2l3.7,1.6v36.4l-4.5-1.4"/>
        <path class="st6" d="M1353.4,601.9l-4.5-1.6v36.4l3.7,1.6"/>
        <router-link to="/detail/nav6" class="is-link">
        <text transform="matrix(0.967 0.3484 -1.778000e-02 0.9998 1360.9799 631.0752)" class="st0 st7 st3">MemDB (Redis）</text>
        </router-link>
      </g>
      <g>
	      <path class="st5" d="M1532.3,304.6l55.2,20.1v36.4l-55.2-20.1L1532.3,304.6z"/>
        <path class="st6" d="M1583.9,323.2l3.7,1.6v36.4l-4.5-1.4"/>
        <path class="st6" d="M1536.8,306.2l-4.5-1.6v36.4l3.7,1.6"/>
        <router-link :to="{path:'/case',query: {myTab:'6'}}" class="is-link">
        <text transform="matrix(0.9045 0.3258 -1.778000e-02 0.9998 1544.3591 335.3306)" class="st0 st7 st3">旅游</text>
        </router-link>
      </g>
      <g>
	      <path class="st5" d="M1403,265.1l60.2,21.5v36.4l-60.2-21.5L1403,265.1z"/>
        <path class="st6" d="M1459.5,285l3.7,1.6v36.4l-4.5-1.4"/>
        <path class="st6" d="M1407.5,266.6l-4.5-1.6v36.4l3.7,1.6"/>
        <router-link :to="{path:'/case',query: {myTab:'5'}}" class="is-link">
        <text transform="matrix(0.9045 0.3258 -1.778000e-02 0.9998 1416.1482 294.6321)" class="st0 st7 st3">金融 </text>
        </router-link>
      </g>
      <g>
	      <path class="st5" d="M1265.5,217.5l58,20.5v36.4l-58-20.5L1265.5,217.5z"/>
        <path class="st6" d="M1319.8,236.5l3.7,1.6v36.4l-4.5-1.4"/>
        <path class="st6" d="M1269.9,219l-4.5-1.6v36.4l3.7,1.6"/>
        <router-link :to="{path:'/case',query: {myTab:'4'}}" class="is-link">
        <text transform="matrix(0.9045 0.3258 -1.778000e-02 0.9998 1277.5065 247.0504)" class="st0 st7 st3">企业</text>
        </router-link>
      </g>
      <g>
	      <path class="st5" d="M848,77.5l55.2,20.1V134L848,113.9L848,77.5z"/>
        <path class="st6" d="M899.6,96l3.7,1.6V134l-4.5-1.4"/>
        <path class="st6" d="M852.5,79l-4.5-1.6v36.4l3.7,1.6"/>
        <router-link :to="{path:'/case',query: {myTab:'1'}}" class="is-link">
          <text transform="matrix(0.9045 0.3258 -1.778000e-02 0.9998 860.0641 108.1576)" class="st0 st7 st3">电信</text>
        </router-link>
      </g>
      <g>
	      <path class="st5" d="M989.1,125.3l55.2,20.1v36.4l-55.2-20.1L989.1,125.3z"/>
        <path class="st6" d="M1040.6,143.8l3.7,1.6v36.4l-4.5-1.4"/>
        <path class="st6" d="M993.5,126.8l-4.5-1.6v36.4l3.7,1.6"/>
        <router-link :to="{path:'/case',query: {myTab:'2'}}" class="is-link">
        <text transform="matrix(0.9045 0.3258 -1.778000e-02 0.9998 1001.0742 155.9524)" class="st0 st7 st3">政务</text>
        </router-link>
      </g>
      <g>
	      <path class="st5" d="M1124.5,171.4l73.5,26.8v36.4l-73.5-26.8V171.4z"/>
        <path class="st6" d="M1194.3,196.6l3.7,1.6v36.4l-4.5-1.4"/>
        <path class="st6" d="M1128.9,172.9l-4.5-1.6v36.4l3.7,1.6"/>
        <router-link :to="{path:'/case',query: {myTab:'3'}}" class="is-link">
        <text transform="matrix(0.9045 0.3258 -1.778000e-02 0.9998 1136.509 202.0636)" class="st0 st7 st3">物联网</text>
        </router-link>
      </g>
      <g>
	      <path class="st5" d="M887.5,632.2l137.8,51.2v36.4l-137.8-51.2L887.5,632.2z"/>
        <path class="st6" d="M1021.6,681.8l3.7,1.6v36.4l-4.5-1.4"/>
        <path class="st6" d="M891.9,633.8l-4.5-1.6v36.4l3.7,1.6"/>
        <router-link to="/detail/nav3" class="is-link">
        <text transform="matrix(0.6937 0.2499 -1.778000e-02 0.9998 898.3929 661.7907)" class="st0 st7 st10">TeleDB for OLAP</text>
        </router-link>
      </g>
      <g>
      	<path class="st5" d="M395.4,530.8l107.9,40.3v36.4l-107.9-40.3L395.4,530.8z"/>
        <path class="st6" d="M499.6,569.6l3.7,1.6v36.4l-4.5-1.4"/>
        <path class="st6" d="M399.9,532.4l-4.5-1.6v36.4l3.7,1.6"/>
        <router-link to="/detail/nav16" class="is-link">
        <text transform="matrix(0.6657 0.2398 -1.778000e-02 0.9998 406.311 560.4221)" class="st0 st7 st10">TeleDB-DCP</text>
        </router-link>
      </g>
      <g>
      	<path class="st5" d="M395.4,578.8l107.9,40.3v36.4l-107.9-40.3L395.4,578.8z"/>
        <path class="st6" d="M499.6,617.5l3.7,1.6v36.4l-4.5-1.4"/>
        <path class="st6" d="M399.9,580.4l-4.5-1.6v36.4l3.7,1.6"/>
        <router-link to="/detail/nav12" class="is-link">
        <text transform="matrix(0.6657 0.2398 -1.778000e-02 0.9998 406.3108 608.3724)" class="st0 st7 st10">TeleDB-DBS</text>
        </router-link>
      </g>
      <g>
	      <path class="st5" d="M515.3,574.2l107.9,40.3v36.4l-107.9-40.3L515.3,574.2z"/>
        <path class="st6" d="M619.5,612.9l3.7,1.6v36.4l-4.5-1.4"/>
        <path class="st6" d="M519.8,575.7l-4.5-1.6v36.4l3.7,1.6"/>
        <router-link to="/detail/nav11" class="is-link">
        <text transform="matrix(0.6657 0.2398 -1.778000e-02 0.9998 526.2158 603.7589)" class="st0 st7 st10">TeleDB-DAS</text>
        </router-link>
      </g>
      <g>
	      <path class="st5" d="M515.3,622.1l107.9,40.3v36.4l-107.9-40.3L515.3,622.1z"/>
        <path class="st6" d="M619.5,660.9l3.7,1.6v36.4l-4.5-1.4"/>
        <path class="st6" d="M519.8,623.7l-4.5-1.6v36.4l3.7,1.6"/>
        <router-link to="/detail/nav13" class="is-link">
        <text transform="matrix(0.6657 0.2398 -1.778000e-02 0.9998 526.2156 651.7092)" class="st0 st7 st10">TeleDB-DMS</text>
        </router-link>
      </g>
      <g>
      	<path class="st5" d="M887.5,681.2l145,52.8v36.4l-145-52.8L887.5,681.2z"/>
        <path class="st6" d="M1028.8,732.4l3.7,1.6v36.4l-4.5-1.4"/>
        <path class="st6" d="M891.9,682.7l-4.5-1.6v36.4l3.7,1.6"/>
        <router-link to="/detail/nav8" class="is-link">
        <text transform="matrix(0.6937 0.2499 -1.778000e-02 0.9998 898.3941 710.7481)" class="st0 st7 st10">TeleDB for HBase</text>
        </router-link>
      </g>
      <g>
        <router-link to="/detail/nav15" class="is-link">
          <text transform="matrix(0.6987 0.3594 -5.989000e-02 0.9982 412.6503 94.5169)" class="st11">
            <tspan x="0" y="0" class="st0 st7 st12">TeleDB-DAM</tspan>
          </text>
        </router-link>
        <router-link to="/detail/nav11" class="is-link">
          <text transform="matrix(0.6987 0.3594 -5.989000e-02 0.9982 412.6503 94.5169)" class="st11">
             <tspan x="0" y="31.2" class="st0 st7 st12">TeleDB-DTS</tspan>
          </text>
        </router-link>
        <router-link to="/detail/nav14" class="is-link">
          <text transform="matrix(0.6987 0.3594 -5.989000e-02 0.9982 412.6503 94.5169)" class="st11">
            <tspan x="0" y="62.4" class="st0 st7 st12">TeleDB-GW</tspan>
          </text>
        </router-link>
        <text transform="matrix(1 0 0 1 92.422 269.4871)" class="st0 st13 st14">云外数据</text>
        <text transform="matrix(1 0 0 1 114.2075 14.0014)" class="st0 st8 st10">MySQL</text>
        <text transform="matrix(1 0 0 1 189.5778 40.7321)" class="st0 st8 st3">SQL Server</text>
        <text transform="matrix(1 0 0 1 218.1801 85.5192)" class="st0 st8 st10">Oracle</text>
        <text transform="matrix(1 0 0 1 212.5107 134.2214)" class="st0 st8 st3">DB2</text>
        <text transform="matrix(1 0 0 1 103.7657 177.7283)" class="st0 st8 st10">PostgreSQL</text>
        <text transform="matrix(1 0 0 1 41.4885 149.3262)" class="st0 st8 st10">Redis</text>
        <text transform="matrix(1 0 0 1 -6.483341e-02 51.8697)" class="st0 st8 st10">MongoDB</text>
        <text transform="matrix(1 0 0 1 11.0732 104.5415)" class="st0 st8 st10">HBase</text>
        <text transform="matrix(0.8396 0.2299 -2.998000e-02 0.9996 1691.2705 285.4968)" class="st0 st13 st15">云上应用</text>
        <text transform="matrix(0.9595 0.2599 -2.998000e-02 0.9996 1600.3593 574.1255)" class="st0 st13 st16">云上DB</text>
        <text transform="matrix(0.9696 0.3099 -2.998000e-02 0.9996 292.5953 412.604)" class="st0 st13 st17">生态工具</text>
        <text transform="matrix(0.9016 0.3386 -5.846000e-02 0.9983 969.1658 612.1627)" class="st0 st13 st18">云上OLAP</text>
      </g>
    </svg>
    <svg
      class="run"
      width="1603px"
      height="741px"
      viewBox="0 0 1603 741"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path id="Path-1" d="M695.15,179.52v53.66l-57.96,60.15 " />
        <path
          id="Path-2"
          d="M997.741173 286.946005 997.741173 339.776895 940.576667 401.128186 948.315817 406.171706"
        />
        <path
          id="Path-3"
          d="M1171.28174 346.558856 1167.32683 399.221291 1113.13422 465.002102 1097.91592 458.537351"
        />
        <path
          id="Path-4"
          d="M1333.78442 405.780479 1329.22136 455.455089 1277.29631 523.892464 1268.23339 519.858593"
        />
        <animateMotion
          id="anim1"
          xlink:href="#oval"
          dur="2s"
          begin="0s;anim1.end + .1s"
          fill="freeze"
          rotate="auto"
        >
          <mpath xlink:href="#Path-1" />
        </animateMotion>
        <image
          id="oval"
          opacity="0"
          x="-7.5"
          y="-7.5"
          width="15"
          height="15"
          xlink:href="../../../assets/images/icon/dian.png"
        ></image>
        <animate
          attributeName="opacity"
          xlink:href="#oval"
          from="0"
          to="1"
          dur=".1s"
          begin="0s"
          fill="freeze"
        ></animate>
        <animateMotion
          id="anim2"
          xlink:href="#oval2"
          dur="2s"
          begin="0s;anim1.end + .1s"
          fill="freeze"
          rotate="auto"
        >
          <mpath xlink:href="#Path-2" />
        </animateMotion>
        <image
          id="oval2"
          opacity="0"
          x="-7.5"
          y="-7.5"
          width="15"
          height="15"
          xlink:href="../../../assets/images/icon/dian.png"
        ></image>
        <animate
          attributeName="opacity"
          xlink:href="#oval2"
          from="0"
          to="1"
          dur=".1s"
          begin="0s"
          fill="freeze"
        ></animate>
        <animateMotion
          id="anim3"
          xlink:href="#oval3"
          dur="2s"
          begin="0s;anim1.end + .1s"
          fill="freeze"
          rotate="auto"
        >
          <mpath xlink:href="#Path-3" />
        </animateMotion>
        <image
          id="oval3"
          opacity="0"
          x="-7.5"
          y="-7.5"
          width="15"
          height="15"
          xlink:href="../../../assets/images/icon/dian.png"
        ></image>
        <animate
          attributeName="opacity"
          xlink:href="#oval3"
          from="0"
          to="1"
          dur=".1s"
          begin="0s"
          fill="freeze"
        ></animate>
        <animateMotion
          id="anim4"
          xlink:href="#oval4"
          dur="2s"
          begin="0s;anim1.end + .1s"
          fill="freeze"
          rotate="auto"
        >
          <mpath xlink:href="#Path-4" />
        </animateMotion>
        <image
          id="oval4"
          opacity="0"
          x="-7.5"
          y="-7.5"
          width="15"
          height="15"
          xlink:href="../../../assets/images/icon/dian.png"
        ></image>
        <animate
          attributeName="opacity"
          xlink:href="#oval4"
          from="0"
          to="1"
          dur=".1s"
          begin="0s"
          fill="freeze"
        ></animate>
      </g>
    </svg>
  </div>
</template>

<script>
export default {
  name: 'text-link'
}
</script>

<style scoped lang="scss">
.rtext {
  position: relative;
  z-index: 1;
}
.run {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}
.st0{fill:#FFFFFF;}
.st1{font-family:'PingFangSC-Medium-GBpc-EUC-H';}
.st2{font-size:17.8182px;}
.st3{font-size:17.8208px;}
.st4{font-size:17.8235px;}
.st5{opacity:0.4;fill-rule:evenodd;clip-rule:evenodd;enable-background:new    ;}
.st6{fill:none;stroke:#FAAD15;}
.st7{font-family:'PingFangHK-Medium-B5pc-H';}
.st8{font-family:'Helvetica';}
.st9{font-size:17.8226px;}
.st10{font-size:20.0484px;}
.st11{enable-background:new    ;}
.st12{font-size:20.0483px;}
.st13{font-family:'AlibabaPuHuiTi-Bold';}
.st14{font-size:26.7313px;}
.st15{font-size:29.0208px;}
.st16{font-size:26.7473px;}
.st17{font-size:26.7139px;}
.st18{font-size:27.5492px;}
.is-link:hover {
  .st0{
    fill: $--color-primary;
  }
}
</style>
